<template>
  <div class="standard_List">
    <div class="list_header">
      <h1>菜单名称</h1>
      <div class="btns">
        <a-button type="primary">发起申请</a-button>
      </div>
    </div>
    <div class="list_content">
      <h2>信息发布列表 <span class="table_delete_btn">删除</span></h2>
      <div class="top_operate">
        <div class="left_search">
          <a-range-picker
            v-model:value="query.rangDate1"
            :disabled-date="disabledDateFormerly"
            valueFormat="YYYY-MM-DD"
            style="width: 220px"
          />
          <a-select
            v-model:value="query.select1"
            style="width: 180px"
            placeholder="请选择所属区域"
            allow-clear
            :options="options1"
          >
          </a-select>
          <a-select
            v-model:value="query.select2"
            style="width: 180px"
            placeholder="请选择预警类型"
            allow-clear
            :options="options2"
          >
          </a-select>
          <a-input
            v-model:value="query.input1"
            style="width: 180px"
            placeholder="请输入产生点位名称"
            allow-clear
          />

          <a-button type="primary" @click="searchHandle">查询</a-button>
        </div>
      </div>
      <a-table
        class="table_custom_class"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :scroll="{ y: 'calc(100vh - 440px)' }"
      >
        <template #bodyCell="{ column, text, record }">
          <!-- 状态 -->
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="text == '1'" style="color: #ff305d"> 审核失败 #FF305D</a-tag>
            <a-tag v-if="text == '2'" style="color: #ffbd49"> 审核中 #FFBD49</a-tag>
            <a-tag v-if="text == '3'" style="color: #2ad24c"> 已通过 #2AD24C</a-tag>
            <a-tag v-if="text == '4'" style="color: #108ee9"> 已提交 #108ee9</a-tag>
          </template>

          <template v-if="column.dataIndex === 'operation'">
            <span class="table_detail_btn" @click="openDetail(record)">详情</span>
            <span class="table_delete_btn">删除</span>
          </template>
        </template>
      </a-table>
      <a-pagination
        style="text-align: center; margin-top: 16px"
        v-model:current="query.pageNum"
        v-model:pageSize="query.pageSize"
        show-quick-jumper
        showSizeChanger
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @change="onChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, message } from 'ant-design-vue'
import { disabledDateFormerly } from '@/utils/aDatePreset.ts'
import { useStandardList } from './useList.ts'

const {
  columns,
  dataSource,
  total,
  query,
  options1,
  options2,
  openDetail,
  searchHandle,
  onChange,
} = useStandardList()
</script>
<style lang="scss" scoped>
.standard_List {
  .table_custom_class {
    .ant-table-thead > tr > th {
      padding: 8px 16px;
      background: #eef5fe;
      font-size: 14px;
      font-weight: 700;
      color: #909399;
    }
    .ant-table-tbody > tr > td {
      padding: 5px 16px;
      height: 42px;
      line-height: 42px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
    }
  }
  .table_detail_btn {
    margin-right: 10px;
    font-size: 14px;
    color: #1677ff;
    cursor: pointer;
    user-select: none;
    &:hover {
      color: #69b1ff;
    }
    &:active {
      color: #0958d9;
    }
  }
  .table_delete_btn {
    margin-right: 10px;
    font-size: 14px;
    color: #dc4446;
    cursor: pointer;
    user-select: none;
    &:hover {
      color: #e86e6b;
    }
    &:active {
      color: #ad393a;
    }
  }
}
</style>
